/**
 * 搜索主页：目前在底部nav有入口进来，20250326把此入口改成了 拓客，用户应该看不到这个页面了，已和产品张珈铭确认过 add by fpli on 20250326
 */
<template>
	<view>
		<view class="status-bar" @touchmove="clearList()"></view>
		<view class="search-head">
			<image src="../../static/img/search/search_01.png" class="search-head-logo" @touchmove="clearList()">
			</image>
			<view class="search-head-input">
				<uni-icons class="input-uni-icon" type="search" size="22" color="#666666" />
				<view>
					<input class="nav-bar-input" v-model="keywords" type="text"
						placeholder="大家都在搜“装修”" maxlength="15" auto-blur="true" @confirm="confirm" @input="getAutocompleteList(keywords)"
						@blur="clearAutocompleteList">
				</view>
				<view class="button" @click="searchPage">搜索</view>
				<scroll-view class="search-history" v-show="AutocompleteList.length" :scroll-top="searchScrollTop"
					scroll-y="true" @scroll="searchScroll">
					<view class="history-list" v-for="(word,index) in AutocompleteList" :key="index"
						@tap.stop="searchByCompleteKeyWord(word.title)" @touchmove="clearListTimeStatus">
						<view v-html="Completeheighthtml(keywords,word.title)" class="hot-list_item"></view>
					</view>
				</scroll-view>
			</view>
			<view class="search-head-hot" @touchmove="clearList()">
				<image src="../../static/img/search/search_03.png" class="search-head-hot-icon"></image>
				<view class="search-head-hot-tag" v-for="(wlist,index) in hotwordlist" :key="index">
					<text class="search-head-hot_item" @click="hotPage(wlist)">{{wlist}}</text>
				</view>
			</view>
		</view>
		<view class="scroll-Y" :style="{height:scrollHei - 50 +'px'}" @touchmove="clearList()">
			<view class="banner">
				<image src="../../static/img/search/search_05.jpg" class="banner-img"></image>
			</view>
			<view class="search-list">
				<view class="search-list_item" @click="searchzb(1)">
					<image src="../../static/img/search/search_09.jpg" class="search-list_item-img"></image>
					<view class="search-list_item-title">查招标</view>
				</view>
				<view class="search-list_item" @click="searchzb(3)">
					<image src="../../static/img/search/search_11.jpg" class="search-list_item-img"></image>
					<view class="search-list_item-title">查拟建</view>
				</view>
				<view class="search-list_item" @click="searchzb(4)">
					<image src="../../static/img/search/search_13.jpg" class="search-list_item-img"></image>
					<view class="search-list_item-title">查中标</view>
				</view>
			</view>
			<view class="xgxx-box">
				<view class="xgxx-item_dy">
					<view class="xgxx-dy-title">采招订阅服务</view>
					<view class="xgxx-dy-ftitle">招标/项目信息订阅与 消息提醒</view>
					<view class="xgxx-dy-btn" @click="dingyuePage">开始订阅</view>
				</view>
				<view class="xgxx-item_xgxx">
					<view class="xgxx-item-title">昨日信息发布数量</view>
					<view class="xgxx-item-ftitle">所有相关信息</view>
					<!--  v-model="zhaobiaocount" -->
					<view class="xgxx-item-num"><text
							style="font-size: 30rpx;">{{zhaobiaocount}}</text> 条</view>
				</view>
				<view class="xgxx-item_xgxx">
					<view class="xgxx-item-title">今日招标总数量</view>
					<view class="xgxx-item-ftitle">所有相关信息</view>
					<view class="xgxx-item-num"><text style="font-size: 30rpx;">{{newzhaobiaocount}}</text> 条</view>
				</view>
			</view>
			<view class="logo-shadow">
				<image src="../../static/img/search/logo-bottom.png"></image>
			</view>
		</view>
		<z-navigation></z-navigation>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import zNavigation from '@/components/navigation/navigation.vue';
	import Autocomplete from '@/mixins/Autocomplete.js'
	export default {
		components: {
			uniIcons,
			zNavigation
		},
		data() {
			return {
				hotwordlist: [],
				keywords: '',
				zhaobiaocount: '0',
				newzhaobiaocount: '0',
				scrollHei: 0,
				AutocompleteList: [],
				showClearIcon:false
			}
		},
		async onLoad() {
			this.binddata();
			// 隐藏原生的tabbar
			uni.hideTabBar();
		},
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.search-head').boundingClientRect(data => {
				this.navListHei = data.height
			}).exec();
			var windowHeight = uni.getSystemInfoSync().windowHeight;
			this.scrollHei = windowHeight - this.navListHei
		},
		mixins: [Autocomplete],
		methods: {
			searchzb(t) {
				uni.navigateTo({
					url: 'searchList?t=' + t
				})
			},
			searchPage() {
				let keywords = this.keywords
				uni.navigateTo({
					url: 'searchList?keysword=' + encodeURIComponent(keywords)
				})
			},
			dingyuePage() {
				uni.switchTab({
					url: '../user/custom/custom'
				})
			},
			binddata() {
				//异步请求数据
				let data = this.initNewData();
				data.from = 4038;
				data.location = 4078;
				uni.request({
					url: this.baseConfig.serverURL + 'zhaobiao/SearchindexHandler.ashx', //检查更新的服务器地址
					data: data,
					method: "POST",
					header: {
						"content-type": "application/x-www-form-urlencoded" //"application/json"
					},
					success: (res) => {
						if (res.statusCode == 200) {
							//console.log(res)
							if (!res.data.ret) {
								//console.log(res.data)	
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								});
								return;
							} else {
								//获取成功，绑定
								let list = res.data.other2;
								if (list == undefined || list == null) {
									uni.showToast({
										title: "数据加载失败",
										icon: "none"
									});
									return;
								}
								this.zhaobiaocount = list.zhaobiaocount;
								this.newzhaobiaocount = list.zhaobiaoCount_today;
								this.hotwordlist = list.hotwordlist;
							}
						} else {
							uni.showToast({
								title: '数据加载失败',
								icon: "none"
							});
						}
					},
					fail: (res) => {
						uni.showToast({
							title: '数据加载失败，可能已超时！',
							icon: "none"
						});
					}
				})

			},
			confirm() {
				this.searchPage();
			},
			
			hotPage(e) {
				uni.navigateTo({
					url: 'searchList?keysword=' + encodeURIComponent(e)
				})
			},
			searchByCompleteKeyWord(keyword) {
				this.keywords = keyword;
				this.AutocompleteList = [];
				uni.navigateTo({
					url: '/pages/search/searchList?keysword=' + encodeURIComponent(this.keywords)
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f6f6f7;
	}

	.logo-shadow {
		width: 100%;
		height: 127rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 50%;
			height: 80rpx;
		}
	}

	.status-bar {
		background-color: #ffffff;
	}

	.search-head {
		background: url(../../static/img/search/search_02.jpg) no-repeat;
		height: 339rpx;
		width: 100%;
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		&-logo {
			height: 88rpx;
			width: 383rpx;
			margin: 45rpx 0;
		}

		&-input {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			border: 1px solid #3e3e3e;
			border-radius: 10rpx;
			width: 92%;
			box-sizing: border-box;
			background-color: #fff;
			padding-left: 30rpx;

			.nav-bar-input {
				flex: 1;
				font-size: 30rpx;
				padding-left: 20rpx;
			}

			.button {
				color: #4476ff;
				font-size: 30rpx;
				padding: 0rpx 30rpx;
				height: 38rpx;
				line-height: 38rpx;
				margin: 28rpx 0;
				border-left: 1px solid #e5e5e5;
			}
		}

		&-hot {
			display: flex;
			flex-direction: row;
			margin-top: 20rpx;
			width: 92%;
			align-items: center;

			&-icon {
				width: 80rpx;
				height: 30rpx;
			}

			&-tag {
				font-size: 30rpx;
				color: #212121;

				.search-head-hot_item {
					margin-left: 30rpx;
				}
			}
		}

	}

	.search-content {
		position: absolute;
		top: 379rpx;
		width: 100%;
		height: 100%;
	}

	.banner {
		width: 92%;
		margin: 30rpx auto 20rpx;

		.banner-img {
			width: 100%;
			height: 279rpx;
		}
	}

	.search-list {
		background-color: #fff;
		display: flex;
		flex-direction: row;
		padding: 40rpx 30rpx 30rpx;
		align-items: center;
		justify-content: center;

		.search-list_item {
			flex: 1 1 0%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.search-list_item-img {
				width: 70rpx;
				height: 67rpx;
			}

			.search-list_item-title {
				font-size: 28rpx;
				font-weight: 700;
				margin-top: 20rpx;
				margin-left: 30rpx;
			}
		}
	}

	.xgxx-box {
		display: flex;
		flex-direction: row;
		margin: 30rpx;
		height: 291rpx;

		.xgxx-item_dy {
			height: 291rpx;
			width: 240rpx;
			background: url(../../static/img/search/search_18.jpg) no-repeat;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			.xgxx-dy-title {
				font-size: 30rpx;
				color: #fff;
				margin-top: 38rpx;
			}

			.xgxx-dy-ftitle {
				font-size: 26rpx;
				margin: 20rpx 30rpx;
				color: #fff;
			}

			.xgxx-dy-btn {
				background-color: #fff;
				width: 140rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				font-size: 24rpx;
				color: #2998ff;
				border-radius: 5rpx;
			}
		}

		.xgxx-item_xgxx {
			height: 291rpx;
			width: 224rpx;
			background: url(../../static/img/search/search_19.jpg) no-repeat;
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			padding: 0 30rpx;
			box-sizing: border-box;

			.xgxx-item-title {
				color: #282828;
				font-size: 30rpx;
				margin-top: 40rpx;
			}

			.xgxx-item-ftitle {
				color: #bdbdbd;
				font-size: 26rpx;
				margin: 15rpx 0 30rpx;
			}

			.xgxx-item-num {
				color: #ee5741;
				font-size: 30rpx;
				font-weight: 700;
			}
		}
	}

	.scroll-Y {
		overflow-y: scroll;
	}

	.search-head-input {
		position: relative;
	}

	.search-history {
		position: absolute;
		left: 0;
		background-color: #FFFFFF;
		top: 94rpx;
		width: 100%;
		z-index: 999;
		border-radius: 0 0 10rpx 10rpx;
		// height: 398rpx;
		max-height: 398rpx;
		overflow-y: scroll;
		padding-bottom: 20rpx;
		box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);

		.history-list {
			padding: 23rpx 30rpx;
			font-size: 28rpx;
			position: relative;

			&::after {
				content: '';
				position: absolute;
				left: 30rpx;
				right: 30rpx;
				height: 1px;
				bottom: 0;
				background-color: #EEEEEE;
			}
		}
	}
</style>
